<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        .trbg {
            background-color: aquamarine;
        }

    </style>

    <script src="jquery-3.7.1.min.js"></script>
</head>
<body>

<table border="2px" cellpadding="5" cellspacing="0">

    <thead>

    </thead>
    <tbody>

    <tr class="trbg">
        <td>HELLO JQUERY1</td>
        <td>HELLO JQUERY2</td>
        <td>HELLO JQUERY3</td>
    </tr>

    <tr class="trbg">
        <td>HELLO JQUERY4</td>
        <td>HELLO JQUERY5</td>
        <td>HELLO JQUERY6</td>
    </tr>

    </tbody>
</table>


<button id="add">add row</button>
<script>

    /* $(".trbg").click(function () {
         console.log($(this)[0]);
     })*/

    $("table tbody").on('click', '.trbg', function () {
        console.log($(this)[0]);
    })

    // ~~~~~~~~~~~

    // ````````````

    $("#add").click(function () {
        $("table tbody").append(
            ` <tr class="trbg">
        <td>HELLO JQUERY</td>
        <td>HELLO JQUERY</td>
        <td>HELLO JQUERY</td>
            </tr>`);
    })
</script>

</body>
</html>